<template>
	<view class="box">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head"
			:style="'padding-top:'+statusBarHeight1+'px;padding-right:'+ (WXwidth + 15) +'px;height:' + (statusBarHeight1 + 44) + 'px'">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="head" :style="'padding-top:'+(statusBarHeight1+10)+'px;height:' + (statusBarHeight1 + 54) + 'px'">
				<!-- #endif -->
				<image class="fanhui" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
					mode=""></image>
				<view class="centers">
					加分项
				</view>
				<view class="head_right"></view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view
				:style="'padding-top:'+statusBarHeight1+'px;height:' + (statusBarHeight1 + 44) + 'px;background-color: #64B6A8;'">
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view
				:style="'padding-top:'+statusBarHeight1+'px;height:' + (statusBarHeight1 + 54) + 'px;background-color: #64B6A8;'">
			</view>
			<!-- #endif -->
			<view class="notice">
				<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_tz.png" mode=""></image>
				<span>填写更多资料，会让面试效果加倍</span>
			</view>
			<view class="center">
				<view class="center_item">
					<view class="left">
						培训经历
					</view>
					<view class="right" @click="tiaozhuan(1)">
						<input class="inputs" disabled type="text">
						<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item" v-for="(i,j) in trainExperience" :key="j" @click="revisepxjl(i,j)">
					<label v-html="'\u2003\u2003\u2003\u2003'" class="left"></label>
					<view class="right">
						<input class="inputs" v-model="i.trainingInstitutions" disabled type="text">
						<image class="image" @click.stop="remove(1,j)" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jianh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item">
					<view class="left">
						语言能力
					</view>
					<view class="right" @click="tiaozhuan(2)">
						<input class="inputs" disabled type="text">
						<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item" v-for="(i,j) in languageAbility" :key="j" @click="reviseyynl(i,j)">
					<label v-html="'\u2003\u2003\u2003\u2003'" class="left"></label>
					<view class="right">
						<input class="inputs" v-model="i.languages" disabled type="text">
						<image @click.stop="remove(2,j)" class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jianh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item">
					<view class="left">
						资格证书
					</view>
					<view class="right" @click="tiaozhuan(3)">
						<input class="inputs" disabled type="text">
						<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item" v-for="(i,j) in qualification" :key="j" @click="revisezgzs(i,j)">
					<label v-html="'\u2003\u2003\u2003\u2003'" class="left"></label>
					<view class="right">
						<input class="inputs" v-model="i.certificateName" disabled type="text">
						<image class="image" @click.stop="remove(3,j)" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jianh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item">
					<view class="left">
						专业技能
					</view>
					<view class="right" @click="tiaozhuan(4)">
						<input class="inputs" disabled type="text">
						<image class="image" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jh.png" mode=""></image>
					</view>
				</view>
				<view class="center_item" v-for="(i,j) in professionalSkills" :key="j" @click="revisezyjn(i,j)">
					<label v-html="'\u2003\u2003\u2003\u2003'" class="left"></label>
					<view class="right">
						<input class="inputs" v-model="i.skillName" disabled type="text">
						<image class="image" @click.stop="remove(4,j)" src="https://pic.bangbangtongcheng.com/static/bbzc/jfx_jianh.png" mode=""></image>
					</view>
				</view>
				<view class="otherMaterials">
					<view class="title">
						个人作品
					</view>
					<view class="shangchuan">
						<view class="cu-form-group" style="padding: 0">
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="9"
								width="200rpx"
								height="200rpx"
							></u-upload>
						</view>
					</view>
				</view>
			</view>
			<view class="bottoms">
				<view class="btn" @click="fanhui(1)">
					完成
				</view>
			</view>
		</view>
</template>
<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	//#ifdef H5
	import wxshare from "@/utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("Pduser"),
				WXwidth: '',
				fileList1:[],
				// 培训经历数据
				trainExperience:[],
				//语言能力数据
				languageAbility:[],
				// 资格证书数据
				qualification:[],
				// 专业技能数据
				professionalSkills:[]
			};
		},
		onLoad() {
			var than = this;
			// 获取微信小程序胶囊和据右边宽度
			// #ifdef MP-WEIXIN
			// 获取胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let getWindowInfo = uni.getWindowInfo().screenWidth
			this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
			// #endif
			let data = uni.getStorageSync('jfx_key');
			console.log(data)
			uni.removeStorageSync('jfx_key');
			if(data.trainingExperience){
				this.trainExperience = JSON.parse(data.trainingExperience)
			}
			if(data.languageAbility){
				this.languageAbility = JSON.parse(data.languageAbility)
			}
			if(data.qualification){
				this.qualification = JSON.parse(data.qualification)
			}
			if(data.professionalSkills){
				this.professionalSkills = JSON.parse(data.professionalSkills)
			}
			if(data.personalWorks){
				data.personalWorks.split("|").forEach(v=>{
					this.fileList1.push({type: "image",url:v})
				})
			}
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		mounted() {
			
		},
		computed: {
			...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"])
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).data[0].url)
							}, 1000)
						}
					});
				})
			},
			// 跳转数据填写页
			tiaozhuan(index){
				if(index===1){
					// 填写培训经历
					uni.navigateTo({
						url:"/pages_recruitMoney/publish/more/bonusItemM/trainExperience"
					})
				}else if(index===2){
					// 填写语言能力
					uni.navigateTo({
						url:"/pages_recruitMoney/publish/more/bonusItemM/languageAbility"
					})
				}else if(index===3){
					// 填写资格证书
					uni.navigateTo({
						url:"/pages_recruitMoney/publish/more/bonusItemM/qualification"
					})
				}else if(index===4){
					// 填写专业技能
					uni.navigateTo({
						url:"/pages_recruitMoney/publish/more/bonusItemM/professionalSkills"
					})
				}
			},
			fanhui(index){
				if(index == '1'){
					console.log(this.trainExperience)
					console.log(this.languageAbility)
					console.log(this.qualification)
					console.log(this.professionalSkills)
					let data = {}
					if(this.trainExperience.length){
						data.trainingExperience = JSON.stringify(this.trainExperience)
					}
					if(this.languageAbility.length){
						data.languageAbility = JSON.stringify(this.languageAbility)
					}
					if(this.qualification.length){
						data.qualification = JSON.stringify(this.qualification)
					}
					if(this.professionalSkills.length){
						data.professionalSkills = JSON.stringify(this.professionalSkills)
					}
					if(this.fileList1.length){
						let arr = []
						this.fileList1.forEach(v=>{
							arr.push(v.url)
						})
						data.personalWorks = arr.join('|')
					}else{
						data.personalWorks = ''
					}
					let pages = getCurrentPages();
					let prevPage = pages[ pages.length - 2 ];  
					prevPage.$vm.bonusItem = data;  
				}
				uni.navigateBack({  
				    delta: 1
				});
			},
			// 处理培训经历数据
			revisepxjl(i,j){
				uni.setStorageSync('pxjl_key', i);
				uni.navigateTo({
					url:"/pages_recruitMoney/publish/more/bonusItemM/trainExperience?index=" + j
				})
			},
			// 处理语言能力数据
			reviseyynl(i,j){
				uni.setStorageSync('yynl_key', i);
				uni.navigateTo({
					url:"/pages_recruitMoney/publish/more/bonusItemM/languageAbility?index=" + j
				})
			},
			// 处理资格证书数据
			revisezgzs(i,j){
				uni.setStorageSync('zgzs_key', i);
				uni.navigateTo({
					url:"/pages_recruitMoney/publish/more/bonusItemM/qualification?index=" + j
				})
			},
			// 处理专业技能数据
			revisezyjn(i,j){
				uni.setStorageSync('zyjn_key', i);
				uni.navigateTo({
					url:"/pages_recruitMoney/publish/more/bonusItemM/professionalSkills?index=" + j
				})
			},
			remove(biaos,index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否移除该内容！',
					success: function (res) {
						if (res.confirm) {
							if(biaos==1){
								that.trainExperience.splice(index,1)
							}else if(biaos ==2){
								that.languageAbility.splice(index,1)
							}else if(biaos == 3){
								that.qualification.splice(index,1)
							}else if(biaos == 4){
								that.professionalSkills.splice(index,1)
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
			 	nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 160rpx;
	}

	.head {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		background-color: #64B6A8;
		z-index: 1000;

		.fanhui {
			width: 40rpx;
			height: 40rpx;
		}

		.centers {
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.head_right {
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.notice{
		width: 750rpx;
		height: 62rpx;
		background-color: #FFF9F4;
		border: 1px solid #FCAB66;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #A78466;
		.image{
			width: 48rpx;
			height: 48rpx;
			margin-left: 30rpx;
			margin-right: 10rpx;
		}
	}
	.center{
		padding: 0 40rpx;
		.center_item{
			display: flex;
			align-items: center;
			height: 90rpx;
			.left{
				font-size: 34rpx;
				font-weight: 600;
				color: #000000;
			}
			.right{
				flex: 1;
				margin-left: 30rpx;
				height: 100%;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #E0E0E0;
				.inputs{
					flex:1;
				}
				.image{
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
		.otherMaterials{
			margin-top: 40rpx;
			.title{
				font-size: 34rpx;
				font-weight: 600;
				color: #000000;
				margin-bottom: 30rpx;
			}
		}
	}
	.bottoms{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 670rpx;
			height: 80rpx;
			background-color: #64B6A8;
			border-radius: 50rpx;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
